<template>
  <div>
    <div
      class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main"
      style="height:300px;overflow:auto"
      id="dialogue_box"
    >
      <h2 class="sub-header">信息列表</h2>
      <div class="table-responsive">
        <table class="table table-striped">
          <thead>
            <tr>
              <th>#</th>
              <th>姓名</th>
              <th>性别</th>
              <th>年龄</th>
              <th>爱好</th>
              <th>时间</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item in students" :key="item.id">
              <td>{{ item.id }}</td>
              <td>{{ item.name }}</td>
              <td>{{ item.gender == 0 ? '男':'女' }}</td>
              <td>{{ item.age}}</td>
              <td>{{ item.hobbies }}</td>
              <td>{{ item.time }}</td>
              <td>
                <!-- <router-link to="edit" class="btn btn-primary btn-sm" :thisStudent="student">编辑</router-link> -->
                <a class="btn btn-danger btn-sm" @click="deleteStudent(item.id,item)">删除</a>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
      <h2 class="sub-header">添加信息</h2>
      <div class="form-group">
        <label for>姓名</label>
        <input
          type="text"
          class="form-control"
          id
          name="name"
          required
          minlength="2"
          maxlength="10"
          placeholder="请输入姓名"
          v-model="student.name"
        >
      </div>
      <div class="form-group">
        <label for>性别</label>
        <div>
          <label class="radio-inline">
            <input type="radio" :checked="true" name="gender" value="0" v-model="student.gender"> 男
          </label>
          <label class="radio-inline">
            <input type="radio" name="gender" value="1" v-model="student.gender"> 女
          </label>
        </div>
      </div>
      <div class="form-group">
        <label for>年龄</label>
        <input
          class="form-control"
          type="number"
          id
          name="age"
          required
          min="1"
          max="150"
          placeholder="请输入年龄"
          v-model="student.age"
        >
      </div>
      <div class="form-group">
        <label for>爱好</label>
        <input
          class="form-control"
          type="text"
          v-model="student.hobbies"
          id
          name="hobbies"
          placeholder="请输入爱好"
        >
      </div>
      <a v-show="disabled" @click="doSubmit" class="btn btn-primary">提交</a>
    </div>
  </div>
</template>
<script>
import { Toast } from "mint-ui";
export default {
  props: ["students"],
  data() {
    return {
      student: { gender: 0 },
      disabled: true
    };
  },
  methods: {
    doSubmit(e) {
      this.disabled = false;
      clearTimeout(t);
      var t = setTimeout(() => {
        this.disabled = true;
      }, 0);
      if (!this.student.name) {
        alert("请输入姓名!");
        e.preventDefault();
        return false;
      }
      if (!this.student.hobbies) {
        alert("请输入爱好!");
        e.preventDefault();
        return false;
      }
      if (!this.student.age) {
        alert("请输入年龄!");
        e.preventDefault();
        return false;
      } else {
        var formData = JSON.stringify(this.student);
        this.$http
          .post("/students/new", formData)
          .then(() => {
            this.$parent.getStudents;
          })
          .catch(function() {
            console.log("服务器异常！");
          });
        this.$parent.getStudents();
        Toast({
          message: "添加信息成功！",
          position: "middle",
          duration: 1000,
          iconClass: "glyphicon glyphicon-ok"
        });
      }
    },
    deleteStudent(studentID,student) {
      var formData = JSON.stringify(student);
      console.log(formData);
      this.$http
        .post("/history/new", formData)
        .then(() => {
          this.$parent.getStudentsHistory();
        })
        .catch(function() {
          console.log("服务器异常！");
        });
      var id = parseInt(studentID);
      this.$http
        .get("/students/delete", { params: { id } })
        .then(() => {
          this.$parent.getStudents();
        })
        .catch(function() {
          console.log("服务器异常！");
        });
      this.$parent.getStudents();
      Toast({
        message: "ID为" + id + "的信息成功！",
        position: "middle",
        duration: 1000,
        iconClass: "glyphicon glyphicon-ok"
      });
    }
  },
  updated: function() {
    this.$nextTick(function() {
      var div = document.getElementById("dialogue_box");
      div.scrollTop = div.scrollHeight;
    });
  },
  watch: {
    // students: function() {
    //   this.$parent.getStudents();
    // }
  }
};
</script>
<style>
</style>